<%@ taglib prefix="s" uri="/struts-tags"%>

<style>
	.datepicker img{
		height: 25px;
    	margin-left: 5px;
    	margin-top: 5px;
    	width: 25px;
	}
</style>

<section id="main-content-no-menu">
	<section class="wrapper"> 
		<h3>
			Crea il tuo account PecuSwap
		</h3>
		<div class="form-panel">
			<s:form cssClass="form-horizontal style-form" action="doRegistrazione" id="registrazioneForm">
			
				<!-- nome cognome -->
				<div class="form-group">
					
					<!-- nome -->
					<label class="col-sm-2 control-label"><s:text name="global.nome" /></label>
					<div class="col-sm-2">
						<s:textfield name="nome" cssClass="form-control"/>
					</div>
					
					<!-- cognome -->
					<label class="col-sm-1 control-label"><s:text name="global.cognome" /></label>
					<div class="col-sm-2">
						<s:textfield name="cognome" cssClass="form-control"/>
					</div>
					
					<s:fielderror fieldName="nomeCognome" cssClass="col-sm-2 alert alert-danger"/>
				</div>
				
				<!-- username -->
				<div class="form-group">
					<label class="col-sm-2 col-sm-2 control-label"><s:text name="global.username" /></label>
					<div class="col-sm-3">
						<s:url value="existUsername.action" id="existUsernameActionUrl"/>
						<s:hidden id="existUsernameAction" value="%{existUsernameActionUrl}"></s:hidden>
						<s:textfield  name="username" cssClass="form-control" id="username"/>
					</div>
					<div class="col-sm-1 collapse" id="divUsername"></div>
					<s:fielderror fieldName="username" cssClass="col-sm-2 alert alert-danger"/>
				</div>
							
				<!-- password -->
				<div class="form-group">
					<label class="col-sm-2 col-sm-2 control-label"><s:text name="global.password" /></label>
					<div class="col-sm-3">
						<s:url value="checkPasswordSecurity.action" id="checkPasswordSecurityActionUrl"/>
						<s:hidden id="checkPasswordSecurityAction" value="%{checkPasswordSecurityActionUrl}"></s:hidden>
						<s:password name="password" cssClass="form-control" id="password"/>
					</div>
					<div class="col-sm-1 collapse" id="divSecurityPassword"></div>
					<s:fielderror fieldName="password" cssClass="col-sm-2 alert alert-danger"/>
				</div>
				
				<!-- conferma password -->
				<div class="form-group">
					<label class="col-sm-2 col-sm-2 control-label"><s:text name="global.conferma.password" /></label>
					<div class="col-sm-3">
						<s:url value="checkConfirmedPassword.action" id="checkConfirmedPasswordActionUrl"/>
						<s:hidden id="checkConfirmedPasswordAction" value="%{checkConfirmedPasswordActionUrl}"></s:hidden>
						<s:password name="confirmPassword" cssClass="form-control" id="confirmPassword"/>
					</div>
					<div class="col-sm-1 collapse" id="divConfirmPassword"></div>
					<s:fielderror fieldName="confirmPassword" cssClass="col-sm-2 alert alert-danger"/>
				</div>
				
				<!-- data di nascita -->
				<div class="form-group">
					<label class="col-sm-2 col-sm-2 control-label"><s:text name="global.dataNascita" /></label>
					<div class="col-sm-2 datepicker" style="display:flex">
						<s:textfield name="dataNascita" cssClass="form-control" id="dataNascita"/>
					</div>
					<s:fielderror fieldName="dataNascita" cssClass="col-sm-2 alert alert-danger"/>
				</div>
				
				<!-- sesso -->
				<div class="form-group">
					<label class="col-sm-2 col-sm-2 control-label"><s:text name="global.sesso" /></label>
					<div class="col-sm-2">
						<s:select name="sesso" cssClass="form-control" list="#{'M':'Uomo', 'F':'Donna'}"/>
					</div>
				</div>
				
				<!-- email -->
				<div class="form-group">
					<label class="col-sm-2 col-sm-2 control-label"><s:text name="global.email" /></label>
					<div class="col-sm-3">
						<s:url value="checkEmail.action" id="checkEmailActionUrl"/>
						<s:hidden id="checkEmailAction" value="%{checkEmailActionUrl}"></s:hidden>
						<s:textfield name="email" cssClass="form-control" id="email"/>
					</div>
					<div class="col-sm-1 collapse" id="divEmail"></div>
					<s:fielderror fieldName="email" cssClass="col-sm-2 alert alert-danger"/>
				</div>
				
				<!-- conferma email -->
				<div class="form-group">
					<label class="col-sm-2 col-sm-2 control-label"><s:text name="global.conferma.email" /></label>
					<div class="col-sm-3">
						<s:url value="checkConfirmedEmail.action" id="checkConfirmedEmailActionUrl"/>
						<s:hidden id="checkConfirmedEmailAction" value="%{checkConfirmedEmailActionUrl}"></s:hidden>
						<s:textfield name="confirmEmail" cssClass="form-control" id="confirmEmail"/>
					</div>					
					<div class="col-sm-1 collapse" id="divConfirmEmail"></div>
					<s:fielderror fieldName="confirmEmail" cssClass="col-sm-2 alert alert-danger"/>
				</div>
				
				<div class="form-group">
					<label class="col-sm-2 col-sm-2 control-label"><s:text name="global.captcha" /></label>
					<div class="col-sm-2">
						<img id="captchaImg" src="<s:url value="captchaImage.action"/>" alt="Captcha Image" height="45">
						<img src="/images/reload.jpg" alt="Reload" onclick="document.forms[0].captchaImg.src='<s:url value="captchaImage.action"/>?id='+Math.random();" style="cursor:pointer"/>
					</div>
					<div class="col-sm-2">
						<s:textfield name="captchaResponse" cssClass="form-control" id="captchaResponse"/>
					</div>
					<s:fielderror fieldName="captchaResponse" cssClass="col-sm-2 alert alert-danger"/>
				</div>
				<s:submit/>
			</s:form>
		</div>
		
		<s:if test="hasActionErrors()">
			<div id="errorDialog">
				<s:actionerror/>
			</div>
		   <script>
			   $( "#errorDialog" ).dialog(
	   					{ width: "auto", modal: "true",
	   	   				  buttons: [ { text: "Chiudi", click: function() { $( this ).dialog( "close" );} } ] }
	   			);
  			</script>
		</s:if>
	</section>
</section>

